<script setup lang="ts">
import { use3DParams } from '@renderer/views/imgViewer/3d/use3DParams'

const {
  paramsRef,
  directionRef,
  templateOptions,
  directionOptions,
  presetWindowsOptions,
  chooseWindowTemplate,
  chooseDirection
} = use3DParams()

</script>

<template>
  <div class="flex">
    <div>
      <span>Template</span>
      <el-select
        v-model="paramsRef.template"
        placeholder="Select"
        style="width: 100px"
      >
        <el-option
          v-for="item in templateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div>
      <span>3D参数</span>
      <el-check-tag v-for="item in presetWindowsOptions"
                    :checked="paramsRef.windows.has(item.value)" type="primary"
                    @change="chooseWindowTemplate(item.value)">
        {{ item.value }}
      </el-check-tag>
    </div>
    <div>
      <span>Direction</span>
      <el-select
        v-model="directionRef"
        placeholder="Select"
        style="width: 100px"
        @change="chooseDirection"
      >
        <el-option
          v-for="item in directionOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>

</template>

<style scoped>

</style>
